<template>
  <view>
    <view style="padding: 20upx 20upx 20upx 0;">
      <view class="type">
        <text class="title">发布类型</text>
        <text class="text">项目帮帮</text>
      </view>
      <view class="article-title flex">
        <text class="title">文章标题</text>
        <textarea class="text article-title-text" v-model="article_title" placeholder="" :maxlength="title_maxlength"/>
        <view class="amount-box">[{{article_title.length}}/
          <text style="color: rgba(181, 0, 0, 1.0);">{{title_maxlength}}</text>
          ]</view>
      </view>
      <view class="cover-map flex">
        <text class="title">封面图片</text>
        <view v-if="!cover_map.length" @click="handleAddCoverMap(1)" class="map-box flex align-center justify-center flex-direction">
          <image style="width: 100%;height: 100%;" src="/static/image/add_imgs4@2x.png" mode=""></image>
        </view>
        <view v-else class="map-box" style="position: relative;">
          <image style="width: 100%;height: 100%;border-radius: 4upx;" :src="cover_map[0]" mode="aspectFill" @click="handlePreviewCoverMap"></image>
          <image class="box-kong" @click="handleDeleteCoverMap()" src="/static/icon/comments/shanchu@2x.png" mode=""></image>
        </view>
      </view>
      <view class="swiper flex">
        <text class="title" style="width: 22%;">轮播图片</text>
        <view class="flex flex-wrap" style="width: 88%;">
          <view style="width: 50%;height: 182upx;padding-top: 20upx;padding-left: 24upx;">
            <view v-if="!swiper_map" @click="handleAddSwiperVideo()" class="flex align-center justify-center flex-direction">
              <image style="width: 238upx; height: 152upx;" src="/static/icon/add_video@2x.png" mode=""></image>
            </view>
            <view v-else class="flex justify-center align-center" style="position: relative;">
              <video id="myVideo" :src="swiper_map" style="width: 238upx; height: 152upx;border-radius: 4upx;" @fullscreenchange="fullscreenchange">
                <cover-image :src="swiper_map+'?vframe/jpg/offset/1'" style="width: 238upx; height: 152upx;" @click="handlePlayVideo"></cover-image>
              </video>
              <image class="box-kong" @click="handleDeleteSwiperVideo" src="/static/icon/comments/shanchu@2x.png" mode=""></image>
            </view>
          </view>
          <view style="width: 50%;height: 182upx;padding-top: 20upx;padding-left: 24upx; position: relative;" v-for="(item, index) in swiper_img_list" :key="index">
            <image style="width: 238upx; height: 152upx;border-radius: 4upx;" :src="item" mode="aspectFill"></image>
            <image class="box-kong" style="top: 4upx; right: 8upx;" @click="handleDeleteSwiperMap(index)" src="/static/icon/comments/shanchu@2x.png" mode=""></image>
          </view>
          <view style="width: 50%;height: 182upx;padding-top: 20upx;padding-left: 24upx;">
            <view v-if="swiper_img_list.length < 5" @click="handleAddSwiperMap()" class="flex align-center justify-center" style="width: 238upx;">
              <image style="width: 238upx; height: 152upx;" src="/static/icon/online_5@2x.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <view class="article-content">
        <view style="margin-bottom: 30upx;">
          <text class="title">招聘信息</text>
        </view>
        <!--富文本-->
        <view style="width: 100%;">
          <view class='toolbar' @tap="format">
            <!--上传图片-->
            <view :style="formats.bold ? ' color: #407BE1;' : ''" class="iconfont icon-zitijiacu"
                  data-name="bold"></view>
            <view class="iconfont icon-charutupian" @tap="insertImage"></view>
            <view :style="formats.header === 1 ? 'color: #407BE1;' : ''" class="iconfont icon-format-header-1"
                  data-name="header"
                  :data-value="1"></view>
            <view :style="formats.script === 'sub' ? 'color: #407BE1;' : ''" class="iconfont icon-zitixiabiao"
                  data-name="script"
                  data-value="sub"></view>
            <view :style="formats.script === 'super' ? 'color: #407BE1;' : ''" class="iconfont icon-zitishangbiao"
                  data-name="script"
                  data-value="super"></view>
            <view class="iconfont icon-shanchu" @tap="clear"></view>
            <view :style="formats.italic ? 'color: #407BE1;' : ''" class="iconfont icon-zitixieti"
                  data-name="italic"></view>
            <view :style="formats.underline ? 'color: #407BE1;' : ''" class="iconfont icon-zitixiahuaxian"
                  data-name="underline"></view>
            <view :style="formats.align === 'left' ? 'color: #407BE1;' : ''" class="iconfont icon-zuoduiqi"
                  data-name="align"
                  data-value="left"></view>
            <view :style="formats.align === ' center' ? 'color: #407BE1;' : ''" class="iconfont icon-juzhongduiqi"
                  data-name="align"
                  data-value="center"></view>
            <view :style="formats.align === ' right' ? 'color: #407BE1;' : ''" class="iconfont icon-youduiqi"
                  data-name="align"
                  data-value="right"></view>
            <!--            <view :style="formats.align === ' justify' ? ' color: #407BE1;' : ''" class="iconfont icon-zuoyouduiqi"-->
            <!--                  data-name="align"-->
            <!--                  data-value="justify"></view>-->
            <view :style="formats.lineHeight ? ' color: #407BE1;' : ''" class="iconfont icon-line-height"
                  data-name="lineHeight"
                  data-value="2"></view>
            <view :style="formats.letterSpacing ? 'color: #407BE1;' : ''" class="iconfont icon-Character-Spacing"
                  data-name="letterSpacing"
                  data-value="2em"></view>
            <!--            <view :style="formats.marginTop ? 'color: #407BE1;' : ''" class="iconfont icon-722bianjiqi_duanqianju"-->
            <!--                  data-name="marginTop"-->
            <!--                  data-value="20upx"></view>-->
            <!--            <view :style="formats.previewarginBottom ? 'color: #407BE1;' : ''"-->
            <!--                  class="iconfont icon-723bianjiqi_duanhouju"-->
            <!--                  data-name="marginBottom" data-value="20upx"></view>-->
            <!--            <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>-->
            <view :style="formats.fontFamily ? 'color: #407BE1;' : ''" class="iconfont icon-font" data-name="fontFamily"
                  data-value="Pacifico"></view>
            <!--            <view :style="formats.fontSize === '24upx' ? 'color: #407BE1;' : ''" class="iconfont icon-fontsize"-->
            <!--                  data-name="fontSize"-->
            <!--                  data-value="24upx"></view>-->
            <view class="iconfont icon-date" @tap="insertDate"></view>
          </view>
          <editor id="editor" class="ql-container" placeholder="请输入招聘信息" showImgSize showImgToolbar showImgResize
                  @statuschange="onStatusChange" :read-only="read_only" @ready="onEditorReady"
                  style="font-size: 24upx;">
          </editor>
        </view>
      </view>
      <view class="flex align-center" style="width: 100%; height: 80upx; padding: 0 20upx;">
        <view style="font-size: 26upx; color: #666666;">添加其他</view>
        <view style="font-size: 28upx; color: #333333; font-weight: bold; margin: 0 6%;">
<!--          http://cbdtwoweb.tx2.isart.me/-->
          http://cbdweb.tx1.isart.me
        </view>
        <view style="font-size: 20upx; color: #E52718;" @click="handleCopyLink(1)">复制链接</view>
      </view>
      <view class="flex align-center justify-center" style="padding: 40upx 0 20upx 0;font-size: 24upx;">
        <view class="flex align-center justify-center" @click="is_agree = !is_agree" style="margin-right: 8upx;">
          <image :src="is_agree ? selected_img : no_selected_img" alt="" style="width: 25upx; height: 25upx;"></image>
        </view>
        <text style="color: rgba(102,102,102,1);">已阅读并同意</text>
        <text @click="handleToAgreement(0)" style="color: rgba(181, 0, 0, 1.0);">《用户发布文章须知》</text>
        <text style="color: rgba(102,102,102,1);">和</text>
        <text @click="handleToAgreement(1)" style="color: rgba(181, 0, 0, 1.0);">《隐私政策》</text>
      </view>
    </view>
    <view @click="handleRelease" class="release">保存</view>
    <!--下载链接-->
    <view class="cu-modal" :class="is_line?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 554upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">提示</view>
        </view>
        <view style="font-weight: bold; color: #333333; font-size: 28upx;">请继续到电脑端添加</view>
        <view style="font-weight: bold; color: #333333; font-size: 28upx;"> 项目、资料、招聘并发布</view>
        <view class="flex justify-center" style="width: 100%; padding: 26upx; word-break:break-all; color: #0052C6;">
<!--          http://cbdtwoweb.tx2.isart.me/-->
          http://cbdweb.tx1.isart.me
        </view>
        <view class="cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx;">
          <view @click="handleCancelDialog()" style="width: 50%; text-align: center; font-size: 26upx;">
            取消
          </view>
          <view style="width: 2upx; height: 54upx; background-color: #F8F8F8;"></view>
          <view @click="handleCopyLink()" style="width: 50%; text-align: center; color: #E52718; font-size: 26upx;">
            复制链接
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getQiniuToken, chooseImage, chooseVideo, debounce} from "utils/wxUtil";
import {article_publishArticle} from "api/publish/publish"
export default {
  data() {
    return {
      is_line: false, //链接弹框
      category_id: 0, //分类id
      read_only: false,
      formats: {},
      article_title: '',//文章标题
      article_content: '',//文章内容
      title_maxlength: 30, //标题限字
      content_maxlength: 300, //内容限字
      cover_map: [], //封面图路径
      jobs_html: '', //富文本内容
      swiper_map: '', //轮播视频路径
      swiper_img_list: [], //轮播图路径
      editorCtx:null,
      content_type: [
        {
          title: '文字',
          icon: '',
        },
        {
          title: '图片',
          icon: '',
        },
        {
          title: '视频',
          icon: '',
        }], //内容类型
      is_agree: false, //同意协议
      selected_img: '/static/icon/xuanzhong@2x.png', //选中图片
      no_selected_img: '/static/icon/weixuanzhong@2x.png', //未选中图片
    }
  },
  methods: {
    /**
     * @name 获取富文本内容
     */
    getContentHtml() {
      return new Promise((resolve, reject) => {
        this.editorCtx.getContents({
          success: (res)=> {
            this.jobs_html = res.html;
            resolve()
          }
        })
      })
    },
    /**
     * @name 初始化完成时触发
     */
    onEditorReady() {
      let self = this
      uni.createSelectorQuery().select('#editor').context((res) => {
        self.editorCtx = res.context
      }).exec()
    },
    format(e) {
      let {
        name,
        value
      } = e.target.dataset
      if (!name) return
      this.editorCtx.format(name, value)
    },
    onStatusChange(e) {
      this.formats = e.detail
    },
    /**
     * @name 清除富文本
     */
    clear() {
      this.editorCtx.clear({
        success: (res)=> {
          console.log("clear success")
        }
      })
    },
    removeFormat() {
      this.editorCtx.removeFormat()
    },
    insertDate() {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate
      })
    },
    /**
     * @name 上传图片
     */
    insertImage() {
      chooseImage(1).then(res => {
        this.editorCtx.insertImage({
          src: res.image_array[0],
          alt: '图像',
          success: ()=> {
            console.log('insert image success')
          }
        })
      })
    },
    /**
     * @name 添加封面图
     */
    handleAddCoverMap(count) {
      chooseImage(count).then(res=>{
        this.cover_map.push(res.image_array[0]);
      })
    },
    /**
     * @name 删除封面图
     */
    handleDeleteCoverMap() {
      this.cover_map.splice(0,1);
    },
    /**
     * @name 删除封面图
     */
    handlePreviewCoverMap(){
      let imgs = [];
      imgs.push(this.cover_map)
      uni.previewImage({
        urls: imgs
      })
    },
    /**
     * @name 添加轮播视频
     */
    handleAddSwiperVideo() {
      chooseVideo().then(res=>{
        this.swiper_map = res;
      })
    },
    /**
     * @name 播放轮播视频
     */
    handlePlayVideo(e) {
      this.videoContext = uni.createVideoContext('myVideo', this);
      this.videoContext.requestFullScreen({direction: 0});
      this.videoContext.play()
    },
    /**
     * @name 视频全屏
     */
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext.pause()
      }
    },
    /**
     * @name 删除轮播视频
     */
    handleDeleteSwiperVideo() {
      this.swiper_map = '';
    },
    /**
     * @name 添加轮播图
     */
    handleAddSwiperMap() {
      chooseImage(10 - this.swiper_img_list.length).then(res => {
        let upload_imgs = res.image_array;
        this.swiper_img_list = this.swiper_img_list.concat(upload_imgs);
      })
    },
    /**
     * @name 删除轮播图
     * @param {type} index 索引值
     */
    handleDeleteSwiperMap(index) {
      this.swiper_img_list.splice(index,1)
    },
    /**
     * @name 协议跳转
     * @param {type} index 索引值
     */
    handleToAgreement(index) {
      let url_option = {}
      switch (index){
        case 0 :
          url_option = {
            url: '/pages/login/agreement',
            query: {
              type: 2
            }
          }
          break;
        case 1 :
          url_option = {
            url: '/pages/login/agreement',
            query: {
              type: 0
            }
          }
          break;
      }
    },
    /**
     * @name 复制链接
     */
    //复制下载链接
    handleCopyLink(type) {
      uni.setClipboardData({
        data: 'http://cbdweb.tx1.isart.me',
        success: ()=> {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
          if(!type){
            this.is_line = false;
            setTimeout(()=>{
              uni.navigateBack({
                delta: 1
              });
            },500)
          }
          console.log('success');
        }
      });
    },
    /**
     * @name 取消复制
     */
    handleCancelDialog(){
      this.is_line = false
      setTimeout(()=>{
        uni.navigateBack({
          delta: 1
        });
      })
    },
    /**
     * @name 保存文章
     */
    handleRelease: debounce( async function (){
      await this.getContentHtml();
      if(!this.article_title){
        uni.showToast({
          title: '请填写文章标题',
          icon: 'none'
        })
        return;
      }
      if(!this.cover_map.length){
        uni.showToast({
          title: '请上传封面图片',
          icon: 'none'
        })
        return;
      }
      if(this.swiper_img_list.length == 0 && !this.swiper_map){
        uni.showToast({
          title: '请上传轮播图片或视频的其中一个',
          icon: 'none'
        })
        return;
      }
      // if(this.jobs_html == '<p><br></p>'){
      //   uni.showToast({
      //     title: '请上传文章内容',
      //     icon: 'none'
      //   })
      //   return;
      // }
      if(!this.is_agree){
        uni.showToast({
          title: '请阅读并同意《用户发布文章须知》和《隐私政策》',
          icon: 'none'
        })
        return;
      }
      let imgs = this.swiper_img_list.join(',');
      let publish_data = {
        title: this.article_title,
        img: this.cover_map[0],
        jobs_html: this.jobs_html,
        imgs: imgs,
        video: this.swiper_map,
        category_id: this.category_id,
        type: 'article_product',
        valid_status: 0,
      }
      article_publishArticle(publish_data).then(res=>{
        console.log(res)
        this.article_title = '';
        this.cover_map = [];
        this.jobs_html = '';
        this.swiper_map = '';
        this.swiper_img_list = [];
        this.is_line = true;
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }).catch(err=>{
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
      })
    }),


  },
  onLoad(e){
    this.category_id = e.category_id;
    getQiniuToken();
  }
}
</script>

<style scoped lang="less">
@import '@/static/LevineHua-editor/editor-icon.css';
/deep/.ql-blank:before {
  font-style: normal;
}
.wrapper {
  padding: 5upx;
}
.ql-container {
  box-sizing: border-box;
  border: 2upx solid #F8F8F8;
  padding: 12upx 15upx;
  width: 100%;
  min-height: 30vh;
  height: auto;
  background: #fff;
  margin-top: 20upx;
  font-size: 16upx;
  line-height: 1.5;
}
.toolbar {
  //width: 300upx;
  //padding: 0 20upx;
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.iconfont {
  display: inline-block;
  //padding: 8upx 0;
  text-align: center;
  width: 70upx;
  height: 70upx;
  line-height: 40upx;
  cursor: pointer;
  font-size: 32upx;
}
.type {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 0 0 26upx 16upx;
}
.title {
  font-size: 26upx;
  color: rgba(102,102,102,1);
}
.text {
  font-size: 28upx;
  color: rgba(51,51,51,1);
  margin-left: 84upx;
  font-weight: 700;
}
.article-title {
  padding: 30upx 0 26upx 16upx;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}
.article-title-text {
  width: 480upx;
  height: 80upx;
}
.amount-box {
  font-size: 22upx;
  color: rgba(153,153,153,1);
  position: absolute;
  bottom: 26upx;
  right: 16upx;
}
.cover-map {
  padding: 30upx 0 28upx 16upx;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.map-box {
  width: 200upx;
  height: 200upx;
  background-color: rgba(248,248,248,1);
  border-radius: 4upx;
  margin: 30upx 0 0 84upx;
}
.box-kong {
  width: 28upx;
  height: 28upx;
  border-radius: 50%;
  position: absolute;
  top: -16upx;
  right: -16upx;
}
.swiper {
  padding: 30upx 0 28upx 16upx;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.swiper-box {
  width: 238upx;
  height: 152upx;
  background-color: rgba(248,248,248,1);
  margin-top: 30upx;
  margin-left: 24upx;
  border-radius: 4upx;
}
.margin-right-20 {
  margin-right: 20upx;
}
.article-content {
  padding: 30upx 0 26upx 16upx;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}
.content-type {
  padding: 30upx 0  0 16upx;
}
.content-type-box {
  width: 132upx;
  height: 60upx;
  border: 1px solid rgba(229,39,24,1);
  border-radius: 10upx;
  margin-right: 20upx;
}
.article-content-text {
  width: 710upx;
  height: 372upx;
  margin-top: 30upx;
  border: 1px solid rgba(0,0,0,0.05);
}
.article-content-title {
  font-size: 28upx;
  color: rgba(51,51,51,1);
  padding: 18upx 0 0 20upx;
  font-weight: 700;
}
.release {
  height: 98upx;
  font-size: 28upx;
  padding: 30upx 348upx 28upx 346upx;
  background-color: rgba(229,39,24,1);
  color: rgba(255,255,255,1);
}
</style>
